<template>
	<div>
		<div class="mycollect">
			<img src="../assets/goback.png" alt="" @click="goback">
			<span>我的收藏</span>
		</div>
		<div>
			<ul>
				<li v-for="item in list" :key="item[2]" class="bg" @click="jump(item[2])">
					<div class="item_left">
						<p class="p1">{{ item[0] }}</p>
						<p class="p2" >{{ item[2] }}</p>
					</div>
					<div class="item_right">
						<img :src="item[1]">
					</div>
					<div class="clear"></div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				col_list:[],
				list:[],
				user:{},
				ababa:[]
			}
		},
		mounted() {
			this.getlist()
		},
		methods:{
			goback:function(){
				this.$router.push({
					path:'/mine'
				})
			},
			getlist:function(){
				this.user = JSON.parse(localStorage.getItem("userinfo"))
				// console.log(this.user)
				this.$http.post(' http://chonghekj.com/daily/index.php/Home/user/collection',this.$qs.stringify({
					id:this.user.id,
					access_token:this.user.access_token,
				}))
				.then((res)=>{
					// console.log(res)
					this.col_list = res.data.data
					// console.log(this.col_list)
					this.getconlist()
				})
			},
			getconlist:function(){
				console.log()
				for(let i = 0; i < this.col_list.length; i++){
					this.$http.get('http://chonghekj.com/daily/index.php/Home/daily/detail',{
						params:{
							id:this.col_list[i]
						}
					})
					.then((res)=>{
						// console.log(res)
						this.ababa.push(res.data.title,res.data.image,res.data.id)
						this.list.push(this.ababa)
						this.ababa = []
						console.log(this.list)
					})
				}
			},
			jump:function(id){
				console.log(id)
				this.$router.push({
					path:'/xq',
					query:{
						id,
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	*{
		margin: 0;
		padding: 0;
	}
	.mycollect{
		width: 100%;
		position: relative;
		height: 50px;
		text-align: center;
		line-height: 50px;
		font-size: 20px;
		background: #ddd;
		img{
			position: absolute;
			top: 18%;
			left: 0%;
		}
	}
	ul li{
		list-style: none;
		margin-bottom: 3px;
	}
	.bg{
		width: 100%;
		background: #F0F8F7;
		.item_left p{
			padding: 5px 10px;
		}
	}
</style>
